<template>
  <div>
    <div id="head">
      <div class="top">
        <div class="content">
          <div class="letf">
            <img src="../assets/images/logo.png">
            <a class="welcome" href="/"> 欢迎来到远播教育!</a>
            <a href="/register">注册</a>|
            <a href="/login">登录</a>
          </div>
          <div class="right">
            <a href="/oder">我的订单</a>
            <span @mouseover="mouseover1" @mouseout="mouseout1"><img src="../assets/images/logo-h3 .png">官方微信</span>
            <span @mouseover="mouseover2" @mouseout="mouseout2"><img src="../assets/images/logo-h3 .png">手机版</span>
            <div v-show="showImg1" class="logo-h1">
              <img src="../assets/images/logo-h1.jpg">
            </div>
            <div v-show="showImg2" class="logo-h2">
              <img src="../assets/images/logo-h2.jpg">
            </div>
          </div>
        </div>
      </div>
      <div class="bom">
        <div class="letf">
          <div class="sonLetf">
            <h2>EF</h2>
            <h3>英孚教育</h3>
          </div>
          <div class="sonRight">
            <h2>英孚海外游学/留学</h2>
            <h3>美国，英国，加拿大，新加坡</h3>
          </div>
        </div>
        <div class="right">
          <img src="../assets/images/logo-h5.png">
          <span>400-179-2828</span>
        </div>
      </div>
    </div>
    <div id="nav">
      <div class="navSon">
        <el-menu class="el-menu-demo" mode="horizontal" background-color="#008080" text-color="#fff" active-text-color="#fff">
          <el-menu-item index="1">
            <router-link to="/index">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/study">国际游学</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/news">新闻动态</router-link>
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/travel">缤纷旅图</router-link>
          </el-menu-item>
          <el-menu-item index="5">
            <router-link to="/introduce">机构简介</router-link>
          </el-menu-item>
        </el-menu>
      </div>
    </div>
    <router-view/>
    <div id="foot">
      <div class="top">
        <h3>培训机构|培训机构</h3>
        <p>
          <span>国际高中</span>
          <span>国际学校排名</span>
          <span>法律知识</span>
          <span>黑龙江考研网</span>
          <span>经济学考研</span>
          <span>洛阳北大青鸟</span>
          <span>Java课程</span>
          <span>人力资源师考试</span>
          <span>深圳教师招聘网</span>
          <span>软件开发培训</span>
          <span>天津考研网</span>
          <span>佳木斯公务员考试培训</span>
          <span>北京学大教育</span>
          <span>汉普森英语</span>
          <span>青岛it培训</span>
          <span>传媒大学在职研究生</span>
        </p>
      </div>
      <div class="bom">
        <p>Copyright © 114study.com All Rights Reserved. 上海远播教育科技股份有限公司版权所有 沪ICP备07019113号</p>
      </div>
    </div>
    <div id="dish">
      <ul>
        <li>
          <a href="#">
            <img src="../assets/images/icon-1.png">
            <h5>我的会员</h5>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../assets/images/icon-2.png">
            <h5>在线咨询</h5>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../assets/images/icon-3.png">
            <h5>电话咨询</h5>
          </a>
        </li>
        <li>
          <a href="#">
            <img src="../assets/images/icon-4.png">
            <h5>意见反馈</h5>
          </a>
        </li>
      </ul>
      <div id="goTop" @click="backTop">
        <img src="../assets/images/icon-5.png">
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      showImg1: false,
      showImg2: false
    };
  },
  mounted() {
    window.addEventListener("scroll", this.scrollToTop);
  },
  methods: {
    // 鼠标移入移出事件的方法
    mouseover1() {
      this.showImg1 = true;
    },
    mouseover2() {
      this.showImg2 = true;
    },
    mouseout1() {
      this.showImg1 = false;
    },
    mouseout2() {
      this.showImg2 = false;
    },
    // 返回顶部
    backTop() {
      var timer = setInterval(function() {
        let osTop =
          document.documentElement.scrollTop || document.body.scrollTop;
        let ispeed = Math.floor(-osTop / 5);
        document.documentElement.scrollTop = document.body.scrollTop =
          osTop + ispeed;
        this.isTop = true;
        if (osTop === 0) {
          clearInterval(timer);
        }
      }, 30);
    }
  }
};
</script>

<style lang="less" scoped>
#head {
  width: 100%;
  .top {
    height: 32px;
    width: 100%;
    background-color: #f5f5f5;
    .content {
      display: flex;
      justify-content: space-between;
      width: 80%;
      font-size: 12px;
      color: #999;
      margin: 0 auto;
      line-height: 32px;
      .letf {
        img {
          margin-top: 4px;
          height: 24px;
          margin-right: 10px;
        }
        .welcome {
          margin-right: 30px;
        }
        a {
          color: #999;
        }
      }
      .right {
        a {
          margin-right: 30px;
          color: #999;
        }
        span {
          img {
            height: 20px;
          }
          margin-right: 30px;
        }
        position: relative;
        .logo-h1 {
          position: absolute;
          top: 32px;
          left: 50px;
          img {
            border: 1px solid #ccc;
          }
        }
        .logo-h2 {
          position: absolute;
          top: 32px;
          left: 150px;
          img {
            border: 1px solid #ccc;
          }
        }
      }
    }
  }
  .bom {
    width: 80%;
    height: 116px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    .letf {
      display: flex;
      justify-content: space-around;
      color: #13406a;
      .sonLetf {
        h2 {
          font-size: 60px;
          font-weight: bolder;
        }
        h3 {
          font-size: 20px;
        }
        margin-right: 20px;
        margin-top: 20px;
      }
      .sonRight {
        h2 {
          font-size: 40px;
          font-weight: bolder;
        }
        h3 {
          font-size: 24px;
        }
        margin-top: 30px;
      }
    }
    .right {
      line-height: 110px;
      img {
        height: 20px;
      }
      font-size: 20px;
      color: #008080;
    }
  }
}
#nav {
  width: 100%;
  height: 50px;
  font-size: 18px;
  line-height: 50px;
  background-color: #008080;
  .navSon {
    height: 50px;
    width: 80%;
    margin: 0 auto;
    background-color: #008080;
    .el-menu-demo {
      height: 50px;
      background-color: #008080;
      .el-menu-item {
        font-size: 18px;
        height: 50px;
        color: #ccc;
      }
    }
  }
}
#foot {
  color: #75686f;
  background-color: #f5f5f5;
  .top {
    width: 80%;
    height: 120px;
    margin: 0 auto;
    h3 {
      padding-top: 20px;
      font-size: 20px;
    }
    p {
      margin-top: 10px;
      font-size: 16px;
      line-height: 24px;
      span {
        margin-left: 10px;
        margin-right: 10px;
      }
    }
  }
  .bom {
    width: 100%;
    height: 90px;
    background-color: #eee;
    line-height: 100px;
    p {
      text-align: center;
    }
  }
}
#dish {
  font-size: 12px;
  width: 70px;
  background-color: #fff;
  position: fixed;
  top: 30%;
  right: 3%;
  ul {
    li {
      width: 68px;
      height: 68px;
      border: 1px solid #ccc;
      a {
        text-align: center;
        img {
          width: 40px;
          margin-left: 14px;
          margin-bottom: 5px;
          margin-top: 5px;
        }
        h5 {
          color: #333;
        }
      }
    }
  }
  #goTop {
    width: 68px;
    height: 34px;
    border: 1px solid #ccc;
    img {
      height: 34px;
      margin-left: 18px;
    }
    cursor: pointer;
  }
}
</style>
